<template>
  <div class="department">
    <page-search :formConfig="searchFormConfig" />
    <PageContent
      pageName="department"
      ref="pageContentRef"
      :contentTableConfig="contentTableConfig"
      @newBtn="newBtnClick"
      @editBtn="editBtnClick"
    ></PageContent>
    <div>
      <PageModel
        :modalConfig="modalConfigRef"
        ref="pageModelRef"
        :defaultInfo="defaultInfo"
        pageName="department"
      ></PageModel>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, nextTick } from 'vue'
import { useStore } from '@/store'

import PageSearch from '@/components/page-search'
import PageContent from '@/components/page-content'
import PageModel from '@/components/page-model'

import { usePageSearch } from '@/hooks/use-page-search'

import { searchFormConfig } from './config/search.config'
import { contentTableConfig } from './config/content.config'
import { modalConfig } from './config/modal.config'

const [pageContentRef, resetClick, queryClick] = usePageSearch()

// modal配置信息
const store = useStore()
const modalConfigRef = computed(() => {
  const parentIdItem = modalConfig.formItems.find(
    (item) => item.field === 'parentId'
  )

  parentIdItem!.options = store.state.entireDeparment.map((item) => {
    return { title: item.name, value: item.id }
  })
  return modalConfig
})

const pageModelRef = ref<InstanceType<typeof PageModel>>()
const defaultInfo = ref({})

const newBtnClick = () => {
  defaultInfo.value = {}
  nextTick(() => {
    pageModelRef.value!.isShowDialog = true
  })
}
const editBtnClick = (item: any) => {
  defaultInfo.value = { ...item }
  nextTick(() => {
    pageModelRef.value!.isShowDialog = true
  })
}
</script>

<style scoped></style>
